import { Collapse,Breadcrumb} from 'antd';
import React ,{useState}from 'react';
import { Outlet ,useNavigate} from 'react-router-dom';
import Shoplist from '../management/shoplist/shoplist';
// import type { PaginationProps } from 'antd';
// import { Pagination } from 'antd';
import './index.scss'
const { Panel } = Collapse;

export default function Index() {
    const [state, setstate] = useState(['首页']);
    const navigate = useNavigate(); 
    const arr = ['首页']
    function onChange(){

    }
    function yonghu() {
        setstate(['首页','数据管理','用户列表'])
        navigate('/userlist')
    }
    function shouye() {
        setstate(['首页'])
        navigate('/manage')
        console.log(arr);
    }
    function Shoplist() {
        setstate(['首页','数据管理','商品列表'])
        navigate('/shoplist')
    }
    function yhfb() {
        setstate(['首页','图标','用户分布'])
        navigate('/visitor')
    }
    return(
        <div id="index">
            <div className="assid">
                <div className='shouye' onClick={()=>{shouye()}}>首页</div>
                <Collapse defaultActiveKey={['1']} onChange={()=>onChange()} bordered='false' accordion='false' expandIconPosition="end">
                <Panel header="数据管理" key="2">
                    <p className='text' onClick={()=>yonghu()}>用户列表</p>
                    <p className='text' onClick={()=>Shoplist()}>商品列表</p>
                    <p className='text'></p>
                </Panel>
                <Panel header="图表" key="3">
                    <p className='text' onClick={()=>yhfb()}>用户分布</p>
                </Panel>
                <Panel header="This is panel header 3" key="4">
                    <p className='text'>{}</p>
                </Panel>
            </Collapse>
            </div>
            <div className="content">
                <div className="header_container">
                    
                <Breadcrumb>
                {
                    state.map((i,index)=>{
                        return(
                            <Breadcrumb.Item>{i}</Breadcrumb.Item>
                        )
                    })
                }
                    {/* <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>数据管理</Breadcrumb.Item>
                    <Breadcrumb.Item>商品列表</Breadcrumb.Item> */}
                </Breadcrumb>
                </div>
                <Outlet/>
            </div>
        </div>
    )
}